<template>
    <div class="material-index bg-body">
        <el-card class="!border-none" shadow="never">
            <el-row :gutter="15">
                <el-col :span="6" class="tree-box">
                    <!-- <el-input v-model="filterText" class="mb-4" placeholder="Filter keyword" /> -->
                    <el-tree ref="treeRef" class="filter-tree" :data="lists" :props="treeDefaultProps"
                        default-expand-all :filter-node-method="filterNode" @node-click="upuserlist" highlight-current
                        :expand-on-click-node="false" />
                </el-col>
                <el-col :span="18">
                    <!-- <el-row :gutter="15" class="search-box mb-4">
                        <el-col :span="6">
                            <el-button-group>
                                <el-button :icon="Refresh" @click="resetPage" type="primary">刷新</el-button>
                                <el-button :icon="CirclePlus" v-perms="['book/add']" type="primary"
                                    @click="handleAdd">新增
                                </el-button>
                            </el-button-group>
                        </el-col>
                        <el-col :span="8">
                            <el-input placeholder="请输入内容" v-model="formData.account" clearable @keyup.enter="resetPage">
                                <template #prepend>姓名</template>
<template #append>
                                    <el-button :icon="Search" />
                                </template>
</el-input>
</el-col>
<el-col :span="6">
    <el-button @click="resetParams">重置</el-button>
</el-col>
</el-row> -->
                    <div>
                        <el-table :data="pager.lists" border style="width: 100%">
                            <el-table-column fixed prop="id" label="编号" width="80">
                            </el-table-column>
                            <el-table-column label="头像" width="120">

                                <template #default="{ row }">
                                    <el-avatar :size="100" shape="square" :src="row.avatar"></el-avatar>
                                    <!-- <upload @success="onAvatarSuccess" @error="onAvatarError"
                                        :data="{ mid: row.id, uptype: 'memberAvatar' }" :multiple="false"
                                        v-perms="['book/edit']" :show-progress="true">
                                        <el-button type="primary">修改头像</el-button>
                                    </upload> -->
                                    <!--<material-picker v-model="row.avatar" upload-class="bg-body" :limit="1" />
                                      -->
                                    <!-- <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                        list-type="picture-card" :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove">
                                        <el-avatar :size="100" :src="row.avatar"></el-avatar>
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </el-upload> -->
                                </template>
                            </el-table-column>
                            <el-table-column prop="realname" label="姓名" width="120">
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" width="60">
                                <template #default="{ row }">
                                    <el-tag class="ml-2" :type="row.gender == 1 ? '' : 'danger'">
                                        {{ row.gender_txt }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="jobs_name" label="职务" width="80">
                            </el-table-column> -->
                            <el-table-column prop="mobile" label="手机号" width="120">
                            </el-table-column>
                            <el-table-column prop="disable" label="状态" width="100">
                                <template #default="{ row }">
                                    <el-tag class="ml-2" :type="row.disable == 0 ? '' : 'danger'">
                                        {{ row.disable_desc }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="420">
                                <template #default="{ row }">
                                    <!-- <el-button v-perms="['book/edit']" type="primary" link
                                        @click="handleEdit(row)">基本</el-button>
                                    <el-button v-perms="['book/edit']" type="primary" link
                                        @click="handleDetail(row)">修改</el-button>
       
                                    <el-button v-perms="['book/view']" type="primary" link>
                                        <router-link :to="{
                path: './address_book/view',
                query: {
                    id: row.id
                }
            }">
                                            详情
                                        </router-link>
                                    </el-button>
                                    <el-button v-if="row.root != 1 && row.id != 2" v-perms="['book/delete']"
                                        type="danger" link @click="handleDelete(row.id)">
                                        删除
                                    </el-button> -->
                                </template>

                            </el-table-column>
                        </el-table>
                        <div class="flex mt-4 justify-end">
                            <pagination v-model="pager" @change="getLists" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
        <detail-popup v-if="showEdit" ref="detailRef" @success="getLists" @close="showEdit = false" />

    </div>

</template>

<script lang="ts" setup name="material">
import { reactive, ref, watch } from 'vue'
import { adminEdit, adminLists, adminDelete } from '@/api/perms/admin' //管理员列表
import { usePaging } from '@/hooks/usePaging'//建立函数钩子
import { Search, Refresh, CirclePlus, Edit, View, Share } from '@element-plus/icons-vue'
import { ElTree } from 'element-plus'
import { getRoutePath } from '@/router'
import EditPopup from './edit.vue' //编辑用户基本信息
import DetailPopup from './detail.vue' //编辑用户详细信息
import { deptLists } from '@/api/org/party'
import Upload from '@/components/upload/index.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const detailRef = shallowRef<InstanceType<typeof DetailPopup>>()

interface Tree {
    [key: string]: any
}
const onAvatarError = (file: any) => {
    console.log('上传文件失败', file)
}
//上传用户头像
const onAvatarSuccess = (file: any) => {
    console.log('头像上传成功', file.data)
    console.log('用户列表数据', pager.lists)
    Object.keys(pager.lists).forEach((key) => {
        if (pager.lists[key]['id'] == file.data['mid']) {
            pager.lists[key]['avatar'] = file.data['uri']
        }
    })
    //getLists()
}
// ref 只能定义单一类型个数据
const showEdit = ref(false)
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const loading = ref(false)
const queryParams = reactive({
    status: '',
    name: '',
    memview: true /*按用户授权显示部门列表 */
})
// 用户表单数据
const formData = reactive({
    account: '',
    name: '',
    partyid: ''
})
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: adminLists,
    params: formData
})
const upuserlist = (data: any) => {
    formData.partyid = data.id;
    getLists()
    console.log('Clicked node ID:', data.id);
}
/*设定部门Tree->data参数 */
const treeDefaultProps = {
    children: 'children',
    label: 'name'
}
const lists = ref<any[]>([])
async function getDeptLists() {
    loading.value = true
    lists.value = await deptLists(queryParams)
    loading.value = false
    console.log('部门列表返回', lists.value)
}

console.log('用户列表', getLists()) //得到用户列表
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})
const userlist = reactive(getLists())
// 复杂类型数据放到 reactive 中
const data = reactive({
    defaultProps: {
        children: 'children',
        label: 'label'
    },
    searchName: '',
    tableData: getLists()
})
// 节点过滤
const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}

//新增加一个用户
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}
//编辑用户详细信息
const handleDetail = async (data: any) => {
    showEdit.value = true
    await nextTick()
    detailRef.value?.open('edit')
    detailRef.value?.setFormData(data)
}

//挂载完毕读取列表
onMounted(() => {
    getDeptLists()
    getLists()
})
</script>

<style lang="scss" scoped>
.tree-box {
    .el-tree {
        border-radius: 5px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.2);
    }
}
</style>
